import React, {useState, useEffect} from 'react'

import {Container} from './style'

import { Button, Input, Table, Space, Popconfirm, Dropdown, Menu, message } from 'antd'

import moment from 'moment'

import MyRequest from '../../../../request/my_request'

const my_request = new MyRequest()

function UserAdmin(){
    const chooseAuthority = (e) => {
        my_request.changeAuthority({
            userId: currentId,
            authority: e.key
        }).then(res => {
            if(e.key === 'forbidden'){
                message.success('权限修改成功！该用户将在三天内被踢出系统！')
            }else{
                message.success('权限修改成功')
            }
            getUserList()
        })
    }
    let tableColunm = 
        [
            {
                title: '序号',
                key: 'number',
                render: (text, record, index) => {
                    return index + 1
                }
            },
            {
                title: '用户名',
                dataIndex: 'username',
                key: 'username',
            },
            {
                title: '邮箱',
                dataIndex: 'email',
                key: 'email',
            },
            {
                title: '描述',
                dataIndex: 'desc',
                key: 'desc',
            },
            {
                title: '权限',
                key: 'authority',
                dataIndex: 'authority',
            },
            {
                title: '剩余修改邮箱次数',
                key: 'rest_modify_count',
                dataIndex: 'rest_modify_count',
            },
            {
                title: '创建时间',
                key: 'createdate',
                render: (text, record) => {
                    return moment(Number(record.createdate)).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <Space>
                        <Dropdown overlay={menu} disabled={record.authority === 'super' ? true : false} trigger={['click']}>
                            <Button type="primary" size="small" onClick={() => setCurrentId(record.id)}>修改权限</Button>
                        </Dropdown>
                        <Popconfirm
                            title="确定重置密码？"
                            okText="重置"
                            cancelText="暂不"
                            onConfirm={() => resetPassword(record.id)}
                        >
                            <Button type="primary" size="small" danger>重置密码</Button>
                        </Popconfirm>
                    </Space>
                ),
            },
        ]
     //表格结构
    const [tableData, setTableData] = useState([]) //表格数据

    const [currentId, setCurrentId] = useState('')

    const [keyword, setKeyword] = useState('')

    const menu = (
        <Menu onClick={chooseAuthority} selectedKeys={[tableData.filter(item => {
            return item.id === currentId
        }).length === 0 ? '' : tableData.filter(item => {
            return item.id === currentId
        })[0].authority]}>
            <Menu.Item key="admin">
                admin
            </Menu.Item>
            <Menu.Item key="common">
                common
            </Menu.Item>
            <Menu.Item key="forbidden">
                forbidden
            </Menu.Item>
        </Menu>
    )

    useEffect(() => {
        getUserList()
    }, [])

    const getUserList = () => {
        my_request.getUserList({
            email: keyword
        }).then(res => {
            setTableData(res.map((item, index) => {
                return {
                    ...item,
                    key: index
                }
            }))
        })
    }

    const resetPassword = (id) => {
        my_request.resetPassword({
            userId: id
        }).then(res => {
            message.success('密码已重置为 123456 请及时修改！')
        })
    }
    return (
        <Container>
            <div className="top">
                <Space>
                    <Input placeholder="请输入用户邮箱" style={{ width: 200 }} value={keyword} allowClear onChange={(e) => setKeyword(e.target.value)} onPressEnter={getUserList}></Input>
                    <Button type="primary" onClick={getUserList}>查询用户</Button>
                </Space>
            </div>
            <div className="bottom">
                <Table columns={tableColunm} pagination={{showSizeChanger: true, showTotal: (total) => `共 ${total} 条`}} dataSource={tableData} />
            </div>
        </Container>
    )
}

export default UserAdmin